export default function updateNodeElement (newElement, virtualDOM, oldVirtualDOM = {}) {
  // 获取节点对应的属性对象
  const newProps = virtualDOM.props || {}
  const oldProps = oldVirtualDOM.props || {}
  Object.keys(newProps).forEach(propName => {
    const newPropsValue = newProps[propName] || {}
    const oldPropsValue = oldProps[propName] || {}
    if (newPropsValue !== oldPropsValue) {
      // 是否是事件属性
      if (propName.slice(0, 2) === 'on') {
        // 事件名称
        const eventName = propName.toLowerCase().slice(2)
        // 为元素添加事件
        newElement.addEventListener(eventName, newPropsValue)
        
        // 删除原有的事件处理函数
        if (oldPropsValue) {
          newElement.removeEventListener(eventName, oldPropsValue)
        }

      } else if (propName === 'value' || propName === 'checked') {
        // 这种情况不能用setAttribute，所以单独判断
        newElement[propName] = newPropsValue
      } else if (propName === 'className') {
        newElement.setAttribute('class', newPropsValue)
      } else if (propName !== 'children'){
        newElement.setAttribute(propName, newPropsValue)
      }
    }
  })

  // 判断属性被删除的情况，当属性被删除oldProps有那个值，但是newProps没有，所以循环oldProps，让newProps去比对就好了
  Object.keys(oldProps).forEach(propName => {
    const newPropsValue = newProps[propName]
    const oldPropsValue = oldProps[propName]
    if (!newPropsValue) {
      //属性被删除了
      if (propName.slice(0, 2) === 'on') {
        const eventName = propName.toLowerCase().slice(2)
        newElement.removeEventListener(eventName, oldPropsValue)
      } else if (propName !== 'children') {
        newElement.removeEventListener(propName)
      }
    }
  })
}